<template>
  <section class="homepage-mall">
    <div class="section-header">
      <div class="section-title">
        找茶籽商城
      </div>
      <div class="category-list">
        <!--<div v-for="(item,index) in categories" :key="index" class="category-item" :class="{active:index===activeIndex}"-->
             <!--@click="handleClick(index)">{{item.name}}-->
        <!--</div>-->
      </div>
      <div class="more-list">
        <span class="more-icon" @click="handleMore">更多 > </span>
      </div>
    </div>
    <div class="section-content">
      <div class="left-part">
        <div class="part-header">
          成交动态
        </div>
        <div class="sell-list">
          <div v-for="(item,index) in dealRecords" :key="index" class="sell-row">
            <div class="sell-name">{{item.name}}</div>
            <div class="sell-type">{{item.category.name}}</div>
            <div class="sell-price">{{item.price}}</div>
            <div class="sell-date">{{item.updatedDt | parseTime('{m}/{d}')}}</div>
          </div>
        </div>
      </div>
      <div class="right-part">
        <!--<div class="part-header">-->
          <!--<div class="table-column-list">-->
            <!--<div v-for="item,index in tableColumns" :key="index" class="table-column">{{item}}</div>-->
          <!--</div>-->
        <!--</div>-->
        <el-table v-loading="loading"
                  :data="sellRecords"
                  header-row-class-name="table-header"
                  :max-height="400">
          <el-table-column
            prop="name"
            label="名称" >
          </el-table-column>
          <el-table-column
            prop="category"
            label="类别" >
            <template slot-scope="scope">
              {{scope.row.category&&scope.row.category.name}}
            </template>
          </el-table-column>
          <el-table-column
            prop="grade"
            label="品级" >
            <template slot-scope="scope">
              {{scope.row.grade&&scope.row.grade.name}}
            </template>
          </el-table-column>
          <el-table-column
            prop="weight"
            label="可供量(吨)" >
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价(每吨)" >
          </el-table-column>
          <el-table-column
            prop="registryType"
            label="状态" min-width="100">
            <template slot-scope="scope">
              {{auditTypeMap[scope.row.status]}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </section>
</template>

<script>
import HomepageAPI from '@/api/homepage/homepage';
export default {
    data() {
        return {
            activeIndex: 0,
            loading: 0,
            sellRecords: [],
            dealRecords: [],
            auditTypeMap: ['提交信息', '待审核', '交易中', '已完成']
        };
    },
    computed: {
        categories() {
            return this.$store.state.business.categories;
        },
        activeCategory() {
            return this.categories[this.activeIndex] || {};
        }
    },
    mounted() {
        this.getSellRecord();
        this.getDealRecord();
    },
    methods: {
        handleClick(index) {
            this.activeIndex = index;
            this.getPage();
        },
        getSellRecord() {
            this.loading++;
            HomepageAPI.sellRecord()
                .then(data => {
                    this.loading--;
                    this.sellRecords = data.obj;
                })
                .catch(error => {
                    this.loading--;
                    console.error(error);
                });
        },
        handleMore() {
            this.$router.push('/f/search-result');
        },
        getDealRecord() {
            HomepageAPI.dealRecord()
                .then(res => {
                    this.dealRecords = res.obj;
                });
        }
    }
};
</script>

<style lang="scss">
  @import "../../../assets/front/front";

  .homepage-mall {
    height:460px;

    .section-header {
      padding-left: 5px;
      height: 60px;
      display: flex;
      align-items: center;
      .section-title {
        font-size: 22px;
      }
      .category-list {
        margin-left: 60px;
        @include flex-center;
        justify-content: space-around;
        font-size: 12px;
        .category-item {
          margin-right:10px;
          color: #969696;
          cursor: pointer;
          &.active {
            color: #009040;
            position: relative;
            &:after {
              content: '';
              position: absolute;
              bottom: -8px;
              left: 0;
              width: 100%;
              height: 2px;
              background: $main-color;
            }
          }

        }
      }
      .more-list {
        padding:0 10px;
        flex:1;
        text-align: right;
        >.more-icon {
          padding:5px;
          cursor: pointer;
        }
      }
    }
    .section-content {
      height:400px;
      display: flex;
      border: solid 1px #e6e6e6;
      background-color: white;
      .part-header {
        box-sizing: border-box;
        height:50px;
        line-height: 50px;
        border-bottom: 1px solid $bg-color;
      }
      .left-part{
        width:300px;
        padding:0 15px;
        color: #8b8b8b;
        border-right:1px solid $bg-color;
        .sell-list {
          padding:10px;
          .sell-row {
            .sell-name,.sell-type,.sell-price,.sell-date {
              display: inline-block;
              width:20%;
              overflow: hidden;
            }
            .sell-name {
              width:24%;
            }
          }
        }
      }
      .right-part {
        width:900px;
        padding:0 15px;
        .table-column-list {
          @include flex-center;
          justify-content: space-around;
          color: #8b8b8b;
        }
        .table-header {
          height:50px;
        }
      }
    }

  }


</style>
